<template>
  <el-tabs v-model="activeName" class="setting-tabs" @tab-click="handleClick">
    <el-tab-pane label="列表配置" name="list">
      <el-form :label-position="'top'" v-model="formData">
        <el-form-item label="列表名称">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="父级菜单">
          <el-tree-select v-model="formData.menuConfig.parentId" :data="parentMenuList" :props="{
            children: 'children',
            label: 'name',
            value: 'id',
          }" :check-strictly="true" :render-after-expand="false" clearable />
        </el-form-item>
        <el-form-item label="菜单排序">
          <el-input v-model="formData.menuConfig.order" />
        </el-form-item>
        <el-form-item label="数据默认排序">
          <el-select clearable v-model="formData.listConfig.defaultOrderBy">
            <el-option v-for="item in formData.fieldCheckBox" :label="item.fieldText" :value="item.fieldName" />
          </el-select>
        </el-form-item>
        <el-form-item label="数据默认排序方式">
          <el-radio-group v-model="formData.listConfig.defaultOrder">
            <el-radio-button label="降序" value="descending" />
            <el-radio-button label="升序" value="ascending" />
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="字段设置" name="field">
      <el-form v-if="isSelectColumn">
        <el-form-item label="是否排序">
          <el-switch v-model="isSelectColumn.isSort" />
        </el-form-item>
        <el-form-item label="是否查询">
          <el-switch v-model="isSelectColumn.isSearch" />
        </el-form-item>
        <el-form-item label="显示方式">
          <el-select v-model="isSelectColumn.renderType" clearable>
            <el-option v-for="item in renderSelect" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <template v-if="isSelectColumn.fieldType === 'radio'">
          <el-form-item label="显示颜色" :label-position="'top'">
            <div class="flex flex-items-center gap-4">
              <div class="flex flex-items-center " v-for="item in isSelectColumn.options">
                <template v-if="isSelectColumn.renderType === 'string'">
                  <div :style="`color:${item.color}`">{{ item.label }}</div>
                  <el-color-picker :size="'small'" v-model="item.color" show-alpha :predefine="[
                    '#ff4500',
                    '#ff8c00',
                    '#ffd700',
                    '#90ee90',
                    '#00ced1',
                    '#1e90ff',
                    '#c71585',
                    'rgba(255, 69, 0, 0.68)',
                    'rgb(255, 120, 0)',
                    'hsv(51, 100, 98)',
                    'hsva(120, 40, 94, 0.5)',
                    'hsl(181, 100%, 37%)',
                    'hsla(209, 100%, 56%, 0.73)',
                    '#c7158577',
                  ]" />
                </template>
                <template v-else-if="isSelectColumn.renderType === 'tag'">
                  <el-tag :size="'default'" :type="item.type">{{ item.label }}</el-tag>
                  <el-select :size="'small'" v-model="item.type">
                    <el-option :label="'primary'" :value="'primary'" />
                    <el-option :label="'success'" :value="'success'" />
                    <el-option :label="'info'" :value="'info'" />
                    <el-option :label="'warning'" :value="'warning'" />
                    <el-option :label="'danger'" :value="'danger'" />
                  </el-select>
                </template>
              </div>
            </div>
          </el-form-item></template>
      </el-form>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import { TabsPaneContext } from 'element-plus';
import { DesignListTableConfig, ListSetting } from '../..';
import MenuApi, { MenuTree } from '@/api/sys/menu';


const formData = defineModel<ListSetting>();

const isSelectColumn = defineModel<DesignListTableConfig>("isSelectColumn");


const renderSelect = [
  {
    label: '文本',
    value: 'string'
  },
  {
    label: '标签',
    value: 'tag'
  }
]

onMounted(async () => {
  await getParentMenuList();
})

//查询父级菜单数据
const parentMenuList = ref<MenuTree[]>([]);
const getParentMenuList = async () => {
  const { dataList } = await MenuApi.queryParentMenuTree();
  parentMenuList.value = dataList;
};

const activeName = ref('list');
const handleClick = (tab: TabsPaneContext, event: Event) => {
  activeName.value = tab.paneName as string;
};
</script>

<style lang="scss" scoped>
.setting-tabs {
  width: 300px;
  padding: 10px;
}
</style>
